<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author LYS
-->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="handleForm({})" v-auth="'card:zpxsj:edit'">
          <Icon icon="fluent:add-12-filled" /> {{ t('新增') }}
        </a-button>
      </template>
      <template #firstColumn="{ record }">
        <a @click="handleForm({ id: record.id })">
          {{ record.tiaoma }}
        </a>
      </template>
    </BasicTable>
    <InputForm @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsCardZpxsjList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, onMounted, ref, defineProps } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { zpxsjDelete, zpxsjListData } from '/@/api/mes/card/zpxsj';
  import { useDrawer } from '/@/components/Drawer';
  import { FormProps } from '/@/components/Form';
  import InputForm from './form.vue';
  import { propTypes } from '/@/utils/propTypes';
  const props = defineProps({
    flag: propTypes.string,
  });
  // 接收url参数

  const { t } = useI18n('card.zpxsj');
  const { showMessage } = useMessage();
  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('拉手数采管理'),
  };

  const searchForm: FormProps = {
    baseColProps: { lg: 6, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        label: t('条码'),
        field: 'tiaoma',
        component: 'Input',
      },
      {
        label: t('p10日期'),
        field: 'p10rq',
        // component: 'Input',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        // valueFormat: 'YYYY-MM-DD',
      },
      {
        label: t('p20日期'),
        field: 'p20rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        label: t('p30日期'),
        field: 'p30rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        label: t('p40日期'),
        field: 'p40rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        label: t('p50日期'),
        field: 'p50rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        label: t('p60日期'),
        field: 'p60rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        label: t('p70日期'),
        field: 'p70rq',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
    ],
    fieldMapToTime: [
      ['p10rq', ['p10rq_gte', 'p10rq_lte']],
      ['p20rq', ['p20rq_gte', 'p20rq_lte']],
      ['p30rq', ['p30rq_gte', 'p30rq_lte']],
      ['p40rq', ['p40rq_gte', 'p40rq_lte']],
      ['p50rq', ['p50rq_gte', 'p50rq_lte']],
      ['p60rq', ['p60rq_gte', 'p60rq_lte']],
      ['p70rq', ['p70rq_gte', 'p70rq_lte']],
    ]
  };

  const tableColumns: BasicColumn[] = [
    {
      title: t('条码'),
      dataIndex: 'tiaoma',
      key: 'a.条码',
      sorter: true,
      width: 300,
      align: 'left',
      // slot: 'firstColumn',
    },
    {
      title: t('型号'),
      dataIndex: 'xinghao',
      key: 'a.型号',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p10日期'),
      dataIndex: 'p10rq',
      key: 'a.p10日期',
      sorter: true,
      width: 230,
      align: 'left',
    },
    {
      title: t('p10打pin位移'),
      dataIndex: 'p10dpinwy',
      key: 'a.p10打pin位移',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p10打pin位移上限'),
      dataIndex: 'p10dpinwysx',
      key: 'a.p10打pin位移上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p10打pin位移下限'),
      dataIndex: 'p10dpinwyxx',
      key: 'a.p10打pin位移下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20日期'),
      dataIndex: 'p20rq',
      key: 'a.p20日期',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('p20执行器条码'),
      dataIndex: 'p20zxqtm',
      key: 'a.p20执行器条码',
      sorter: true,
      width: 300,
      align: 'left',
    },
    {
      title: t('p20螺丝x位置1'),
      dataIndex: 'p20lsxyz_1',
      key: 'a.p20螺丝x位置_1',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝x位置2'),
      dataIndex: 'p20lsxy_2',
      key: 'a.p20螺丝x位置_2',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝x位置3'),
      dataIndex: 'p20lsxy_3',
      key: 'a.p20螺丝x位置_3',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝x位置4'),
      dataIndex: 'p20lsxy_4',
      key: 'a.p20螺丝x位置_4',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝y位置1'),
      dataIndex: 'p20lsxy_1',
      key: 'a.p20螺丝y位置_1',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝y位置2'),
      dataIndex: 'p20lsxy_2',
      key: 'a.p20螺丝y位置_2',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝y位置3'),
      dataIndex: 'p20lsxy_3',
      key: 'a.p20螺丝y位置_3',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝y位置4'),
      dataIndex: 'p20lsxy_4',
      key: 'a.p20螺丝y位置_4',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20x移动速度'),
      dataIndex: 'p20xwysd',
      key: 'a.p20x移动速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20y移动速度'),
      dataIndex: 'p20ywysd',
      key: 'a.p20y移动速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩1'),
      dataIndex: 'p20lsnj_1',
      key: 'a.p20螺丝扭矩_1',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩2'),
      dataIndex: 'p20lsnj_2',
      key: 'a.p20螺丝扭矩_2',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩3'),
      dataIndex: 'p20lsnj_3',
      key: 'a.p20螺丝扭矩_3',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩4'),
      dataIndex: 'p20lsnj_4',
      key: 'a.p20螺丝扭矩_4',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩5'),
      dataIndex: 'p20lsnj_5',
      key: 'a.p20螺丝扭矩_5',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩上限'),
      dataIndex: 'p20lsnjsx',
      key: 'a.p20螺丝扭矩上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p20螺丝扭矩下限'),
      dataIndex: 'p20lsnjxx',
      key: 'a.p20螺丝扭矩下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30日期'),
      dataIndex: 'p30rq',
      key: 'a.p30日期',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30左侧压入深度'),
      dataIndex: 'p30zcyrsd',
      key: 'a.p30左侧压入深度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30左侧压入深度上限'),
      dataIndex: 'p30zcyrsdsx',
      key: 'a.p30左侧压入深度上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30左侧压入深度下限'),
      dataIndex: 'p30zcyrsdxx',
      key: 'a.p30左侧压入深度下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30右侧压入深度'),
      dataIndex: 'p30ycyrsd',
      key: 'a.p30右侧压入深度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30右侧压入深度上限'),
      dataIndex: 'p30ycyrsdsx',
      key: 'a.p30右侧压入深度上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p30右侧压入深度下限'),
      dataIndex: 'p30ycyrsdxx',
      key: 'a.p30右侧压入深度下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40日期'),
      dataIndex: 'p40rq',
      key: 'a.p40日期',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入深度'),
      dataIndex: 'p40yrsd',
      key: 'a.p40压入深度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入深度上限'),
      dataIndex: 'p40yrsdsx',
      key: 'a.p40压入深度上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入深度下限'),
      dataIndex: 'p40yrsdxx',
      key: 'a.p40压入深度下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入力'),
      dataIndex: 'p40yrl',
      key: 'a.p40压入力',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入力上限'),
      dataIndex: 'p40yrlsx',
      key: 'a.p40压入力上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p40压入力下限'),
      dataIndex: 'p40yrlxx',
      key: 'a.p40压入力下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50日期'),
      dataIndex: 'p50rq',
      key: 'a.p50日期',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50左侧压入力'),
      dataIndex: 'p50zcyrl',
      key: 'a.p50左侧压入力',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50左侧压入力上限'),
      dataIndex: 'p50zcyrlsx',
      key: 'a.p50左侧压入力上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50左侧压入力下限'),
      dataIndex: 'p50zcyrlxx',
      key: 'a.p50左侧压入力下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50右侧压入力'),
      dataIndex: 'p50ycyrl',
      key: 'a.p50右侧压入力',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50右侧压入力上限'),
      dataIndex: 'p50ycyrlsx',
      key: 'a.p50右侧压入力上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50右侧压入力下限'),
      dataIndex: 'p50ycyrlxx',
      key: 'a.p50右侧压入力下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50左侧伺服压入深度'),
      dataIndex: 'p50zcsfyrsh',
      key: 'a.p50左侧伺服压入深度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50左侧伺服压入速度'),
      dataIndex: 'p50zcsfyrsd',
      key: 'a.p50左侧伺服压入速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50右侧伺服压入深度'),
      dataIndex: 'p50ycsfyrsh',
      key: 'a.p50右侧伺服压入深度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p50右侧伺服压入速度'),
      dataIndex: 'p50ycsfyrsd',
      key: 'a.p50右侧伺服压入速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60日期'),
      dataIndex: 'p60rq',
      key: 'a.p60日期',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手空载电流'),
      dataIndex: 'p60bskjdl',
      key: 'a.p60把手空载电流',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手空载电流上限'),
      dataIndex: 'p60bskjdlsx',
      key: 'a.p60把手空载电流上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手堵转电流'),
      dataIndex: 'p60bsdzdl',
      key: 'a.p60把手堵转电流',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手堵转电流上限'),
      dataIndex: 'p60bsdzdlsx',
      key: 'a.p60把手堵转电流上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60手柄电动弹出值'),
      dataIndex: 'p60sbddtcz',
      key: 'a.p60手柄电动弹出值',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60手柄电动弹出值上限'),
      dataIndex: 'p60sbddtczsx',
      key: 'a.p60手柄电动弹出值上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60手柄电动弹出值下限'),
      dataIndex: 'p60sbddtczxx',
      key: 'a.p60手柄电动弹出值下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手解锁行程'),
      dataIndex: 'p60bsjsxc',
      key: 'a.p60把手解锁行程',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手解锁行程上限'),
      dataIndex: 'p60bsjsxcsx',
      key: 'a.p60把手解锁行程上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手解锁行程下限'),
      dataIndex: 'p60bsjsxcxx',
      key: 'a.p60把手解锁行程下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手空载拉力值'),
      dataIndex: 'p60bskzllz',
      key: 'a.p60把手空载拉力值',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手空载拉力上限'),
      dataIndex: 'p60bskzllzsx',
      key: 'a.p60把手空载拉力上限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手空载拉力下限'),
      dataIndex: 'p60bskzllzxx',
      key: 'a.p60把手空载拉力下限',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手打开时间'),
      dataIndex: 'p60bsdksj',
      key: 'a.p60把手打开时间',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60把手闭合时间'),
      dataIndex: 'p60bsbhsj',
      key: 'a.p60把手闭合时间',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60左右伺服拉把手位置'),
      dataIndex: 'p60zysflbswz',
      key: 'a.p60左右伺服拉把手位置',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60左右伺服移动速度'),
      dataIndex: 'p60zysfwysd',
      key: 'a.p60左右伺服移动速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60上下伺服拉把手位置'),
      dataIndex: 'p60sxsflbswz',
      key: 'a.p60上下伺服拉把手位置',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60上下伺服下拉位置'),
      dataIndex: 'p60sxsfxwwz',
      key: 'a.p60上下伺服下拉位置',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p60上下伺服下拉速度'),
      dataIndex: 'p60sxsfxlsd',
      key: 'a.p60上下伺服下拉速度',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('p70日期'),
      dataIndex: 'p70rq',
      key: 'a.p70日期',
      sorter: true,
      width: 130,
      align: 'left',
    },
  ];


  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload, getForm }] = useTable({
    api: zpxsjListData,
    beforeFetch: (params) => {
      params.flag = props.flag;
      console.log(params, 'params')
      return params;
    },
    columns: tableColumns,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: true,
    canResize: true,
  });

  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

  async function handleDelete(record: Recordable) {
    const res = await zpxsjDelete(record);
    showMessage(res.message);
    handleSuccess();
  }

  function handleSuccess() {
    reload();
  }
</script>


